<template>
  <div class="login-box">
    <el-card>
      <template #header>
        <h2>比特文章管理系统</h2>
      </template>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        label-width="80px"
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            placeholder="请填写用户名"
            :maxLength="20"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密 码"
          prop="password"
        >
          <el-input
            placeholder="请输入密码"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="login"
          >登 录</el-button>
          <el-button @click="resetForm">重 置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script setup>
  import { ElMessage } from 'element-plus';
  import { ref, reactive } from 'vue';
  import { useUserStore } from '@/store/user'
  import { useRouter, useRoute } from 'vue-router';
  const router = useRouter()
  const route = useRoute()
  const userStore = useUserStore()
  // 登录规则
  const loginRules = {
    username: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
      { min: 4, max: 10, message: '用户名长度为4-10', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 3, max: 16, message: '密码长度为3-16', trigger: 'blur' },
    ]
  }
  // 登录表单DOM
  const loginFormRef = ref(null)
  // 登录表单
  const loginForm = reactive({
    username: 'admin',
    password: 'admin'
  })

  // 登录
  const login = () => {
    loginFormRef.value.validate(async (valid) => {
      if (!valid) return ElMessage.error('请输入正确的格式')

      try {
        // 异步不能捕获错误
        await userStore.login(loginForm)
        // 跳转到目的或首页
        router.push(route.query.redirectUrl || '/')
        ElMessage.success('登录成功')
      } catch (e) {
        ElMessage.error('登录失败')
      }
    })
  }

  // 重置
  const resetForm = () => {
    loginFormRef.value.resetFields()
  }
</script>

<style scoped lang="scss">
  .login-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: url('@/assets/login-bg.svg') center/cover;

    .el-card {
      width: 40vw;

      // :deep(选择器)： scss 样式穿透的语法，什么时候需要⽤到样式穿透：
      // 1. 当前组件的 style 添加了 scoped
      // 2. 修改的是第三⽅组件内部元素的样式
      :deep(.el-card__header) {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 70px;
        // 注意：var(css变量)，好处就是利于今后的代码维护和修改
        background: var(--el-color-primary);
        color: #fff;

        h2 {
          font-size: 16px;
          font-weight: 400;
        }
      }

      .el-form {
        padding: 15px 25px;

        .el-form-item:nth-child(2) {
          margin: 40px 0;
        }

        .el-input {
          height: 45px;
        }

        .el-button {
          width: 65px;
          height: 35px;
        }
      }
    }
  }
</style>